<html>
    <head>
        <title>Test</title>
        <style>
          @import url(charts.css);

          form { font:system; }

          chart 
          {
            width: *;
            height: 0.6*;
            border:1px dashed;
          }
        </style>
        <script type="text/tiscript">

        function self.ready() {

          $(chart).value = {

            labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],

            datasets: [
              {
                title: "Some Data",
                values: [25, 40, 30, 35, 8, 52, 17, -4]
              },
              {
                title: "Another Set",
                values: [25, 50, -10, 15, 18, 32, 27, 14]
              },
              {
                title: "Yet Another",
                values: [15, 20, -3, -15, 58, 12, -17, 37]
              }
            ]
          };

        }

        event change $(form) {
          $(chart).attributes["type"] = this.value.chart;
        }

        event click $(chart) (evt) {
          $(p).text = "#" + evt.data + " selected";
        }

        event change $(input#interpolation) {
           $(chart).interpolation = this.value; 
        }

        event click $(#update) {

          $(chart).value = {

            labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
            datasets: [
              {
                title: "Some Data",
                color: color.red,
                values: [25.0, 40.9, 30.0, 35.0, 44.0, 52.0, 17.0, 34.5]
              },
            ]
          };

        }

        </script>
    </head>
    <body>

    <form>
      <button|radio(chart) value="line" checked>Line chart</button> 
      <button|radio(chart) value="area">Area chart</button>
      <button|radio(chart) value="bar">Bar chart</button>
    </form>

    <label>Interpolation tolerance:</label><input|hslider#interpolation value="0.0" min="0.0" max="1.5" />
    
    <button#update>Update</button>

    <chart|lines interpolation="0.0"/>

    <p/>

    </body>
</html>
